<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>码艺工作室(汽水歌曲解析器)</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="music-player end" id="bat">
    <!-- 播放器头部 -->
    <div class="player-header">
      <h1><i class="fas fa-music"></i> 码艺工作室(解析器)</h1>
      <button id="refresh-audio" class="refresh-btn">
        <i class="fas fa-sync-alt"></i> 刷新列表
      </button>
    </div>
    
    <!-- 音乐列表 -->
    <div class="music-list-container">
      <div id="audio-list" class="music-list">
        <!-- 音乐卡片将通过JavaScript动态添加 -->
        <div class="no-music">
          <div class="no-music-icon"><i class="fas fa-music"></i></div>
          <p>没有找到音乐资源</p>
          <p>请刷新页面后点击"刷新列表"</p>
        </div>
      </div>
    </div>
    
    <!-- 播放控制面板 -->
    <div class="player-controls">
      <div class="now-playing">
        <img id="now-playing-img" src="" alt="封面">
        <div class="track-info">
          <div id="now-playing-title" class="track-title">未选择歌曲</div>
          <div id="now-playing-artist" class="track-artist">未知艺术家</div>
        </div>
      </div>
      
      <div class="player-buttons">
        <button class="control-btn" id="prev-btn"><i class="fas fa-step-backward"></i></button>
        <button class="control-btn play-btn" id="play-btn"><i class="fas fa-play"></i></button>
        <button class="control-btn" id="next-btn"><i class="fas fa-step-forward"></i></button>
      </div>
      
      <div class="progress-container">
        <div class="progress-time" id="current-time">0:00</div>
        <div class="progress-bar">
          <div class="progress" id="progress"></div>
        </div>
        <div class="progress-time" id="duration">0:00</div>
      </div>
      
      <audio id="audio-player">
        <source id="audio-source" type="audio/mpeg">
        您的浏览器不支持音频元素。
      </audio>
    </div>
  </div>
  <div class="top" id="ezdax" >  
    <div class="jxx">
        <input id="Input" type="text" placeholder="请输入需要解析的汽水音乐地址"  />
    </div>
    <div class="jxx">
        
    <button id="bud_">解析</button>
    </div>
  </div> 
  <script src="popup.js"></script>
</body>
</html>